﻿<style>

    #nav ul {
        list-style: none;
        margin-right: 60px;
        float: right;
    }

    #nav li {
        display: inline;
        vertical-align: central;
        line-height: 40px;
        margin-left: 30px;
        float: left
    }

    #nav button {
        width: 100px;
    }
</style>

<link href="../../json-viewer/jquery.json-viewer.css" type="text/css" rel="stylesheet">
<link href="../../lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">


<div class="layuimini-container layuimini-page-anim" style="height:100%">
    <div class="layui-row" id="nav" style="background:#c2c2c2;height:45px">

        <ul>
            <li>
                <button type="button" id="addAction" class="layui-btn layui-btn-sm layui-btn-normal  fa fa-plus-square">  添 加</button>
            </li>
            <li>
                <button type="button" id="delete" class="layui-btn layui-btn-sm layui-btn-danger  fa fa-minus-square">  删 除</button>
            </li>
            <li>
                <button type="button" id="save" class="layui-btn layui-btn-sm  fa fa-save">  保 存</button>
            </li>

        </ul>

    </div>
    <div class="layui-row" style="height:100%">
        <div class="layui-col-md3" style="height: 100%;background-color: #6686AC">
            <div id="treeleft" class="demo-tree-more"></div>
        </div>
        <div id="jsoneditor" class="layui-col-md9" style="height: 100%;">

        </div>
    </div>




</div>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../lib/jsoneditor/jsoneditor.min.js"></script>
<script src="../../json-viewer/jquery.json-viewer.js"></script>
<script>
    layui.use(['jquery', 'tree', 'util', 'layer', 'miniPage'], function () {
        var tree = layui.tree
            , layer = layui.layer
            , util = layui.util,
            miniPage = layui.miniPage,
            $ = layui.jquery;
        var container = document.getElementById("jsoneditor");

        var editor = new JSONEditor(container)

        //树形数据加载
        function treeload(data) {
            tree.render({
                elem: '#treeleft',
                id: "logicaltree",
                data: data,
                showLine: false, //是否开启连接线
                click: function (obj) {
                    console.log(obj);
                    if (obj.data.parentCode === null) {
                        $.ajax({
                            type: 'get',
                            url: 'api/Logical/GetInfo/' + obj.data.title,
                            dataType: 'json',
                            success: function (result) {
                                editor.set(result.data);
                            }
                        });
                    }
                }
            });
        }

        function rend() {
            $.ajax({
                type: 'get',
                url: 'api/Logical/GetLogicals',
                dataType: 'json',
                cache: false,

                success: function (res) {
                    treeload(res.data);
                }
            });
        }


        rend();

        //添加
        $('#addAction').on('click', function () {

            var content = miniPage.getHrefContent('page/Logicals/AddLogical.html');
            var openWH = miniPage.getOpenWidthHeight();

            var index = layer.open({
                title: '添加对接逻辑',
                type: 1,
                shade: 0.2,
                shadeClose: false,
                area: [openWH[0] + 'px', openWH[1] + 'px'],
                offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: content,
                //关闭弹出框的回调函数，不管弹出框是手动关闭还是通过脚本进行关闭，都执行
                end: function (index, layero) {
                    rend();
                }
            });

            $(window).on("resize", function () {
                layer.full(index);
            });
        });

        //保存
        $('#save').click(function (obj) {
            var updatedJson = editor.get();
            console.log(updatedJson);
            $.ajax({
                type: 'post',
                url: '/Logical/UpdateLogical',
                dataType: 'json',
                async: false,
                contentType: 'application/json',
                data: JSON.stringify(updatedJson),
                success: function (res) {
                    if (res.code === 200)
                        layer.msg('保存成功!', { icon: 1 });
                    else
                        layer.msg('保存失败!' + res.msg, { icon: 1 });
                }
            });
            rend();
        });

        //删除
        $('#delete').click(function (obj) {
            var updatedJson = editor.get();
            console.log(updatedJson);
            $.ajax({
                type: 'delete',
                url: 'api/Logical/DeleteLogical',
                dataType: 'json',
                async: false,
                contentType: 'application/json',
                data: JSON.stringify(updatedJson),
                success: function (res) {
                    if (res.code === 200)
                        layer.msg('删除成功!', { icon: 1 });
                    else
                        layer.msg('删除失败!' + res.msg, { icon: 1 });
                }
            });
            rend();
        })
    })
</script>